/*
 * @Title: 首页景点搜索模块
 * @Created by: gsjPC 
 */
<template>
	<view>
		<view class="topBox" :style="{marginTop:statusBarHeight}" >
			<view><uni-icon type="arrowleft" color="#333333" size="20" @tap="goIndex"></uni-icon></view>
			<view class="search">
					<image src="/static/fdj-home.png"></image>
					<input 
						type="text" 
						placeholder="请输入搜索内容"
						@input="keyInput"
						placeholder-style="color:#999999"/>
			</view>
			<view class="searchBtn">搜索</view>
		</view>
		<!-- 历史搜索 -->
		<view class="ssHistory">
			<view class="ssTit historyTit">
				<view>历史搜索</view>
				<view>
					<image src="/static/ssDel.png"></image>
					<view>清空</view>
				</view>
			</view>
			<view class="nolsList" v-if="isShowNoLs">暂无历史搜索</view>
			<view class="lsList" v-else>
				<view 
					v-for="(ls,index) in lsList"
					:key="index">
					<text>{{ls.name}}</text>
				</view>
			</view>
		</view>
		<!-- 搜索推荐 -->
		<view class="ssTuijian">
			<view class="ssTit">搜索推荐</view>
			<view class="lsList">
				<view 
					v-for="(tj,index) in tjList"
					:key="index"
					@tap="ssTab(index)"
					:class="tjIndex == index ? 'tjActive' : ''">
					<text>{{tj.name}}</text>
				</view>
			</view>
		</view>
		<!-- 热门搜索 -->
		<view class="ssHot">
			<view class="ssTit">热门搜索</view>
			<view class="hotList">
				<view
					v-for="(hot,index) in lengthHotList"
					:key="index">
					<text>{{index+1}}</text>
					<text>{{hot.name}}</text>
					<image src="/static/sshot.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	
	export default{
		components:{
			uniIcon
		},
		
		data(){
			return{
				isShowNoLs:false, //默认隐藏暂无搜索
				tjIndex:0, //搜索推荐默认选中第一个
				lsList:[
					{
						name:'凤凰古城'
					},
					{
						name:'马尔代夫'
					},
					{
						name:'稻城亚丁稻城亚丁'
					},
					
				],
				tjList:[
					{
						name:'凤凰古城'
					},
					{
						name:'马尔代夫'
					},
					{
						name:'成都'
					},
					{
						name:'北京'
					},
					{
						name:'马尔代夫'
					},
					
				],
				hotList:[
					{
						name:'稻城亚丁'
					},
					{
						name:'长白山'
					},
					{
						name:'凤凰古城'
					},
					{
						name:'北疆'
					},
					{
						name:'长城'
					},
					{
						name:'泰山'
					}
				]
			}
		},
	
		methods:{
			goIndex(){
				// uni.switchTab({
				// 	url:"/pages/home/home"
				// })
				uni.navigateBack({
					delta:1
				})
			},
			ssTab(index){
				this.tjIndex = index
			}
		},
		onShow(){
			if(this.lsList ==''){
				this.isShowNoLs = true
			}else{
				this.isShowNoLs = false
			}
		},
		computed:{
			statusBarHeight(){
				return global.statusBarHeight +'px'
			},
			// 热门搜索过滤留下前五个
			lengthHotList(){
				if(this.hotList.length <= 5){
					return this.hotList
				}else{
					let filterHotList =  this.hotList.filter((item,index) => {
						 return index < 5
					 })
					 return filterHotList
				}
			},
			
		}
	}
</script>

<style>
	.topBox{
		margin:0 30upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		line-height: 88upx;
	}
	.topBox > view{
		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content:center;
	}
	.searchBtn{
		width:124upx;
		height:50upx;
		line-height: 50upx;
		border-radius:50upx;
		line-height: 50upx;
		background:linear-gradient(to right,#54B1FF,#5691FF);
		color: #FFFFFF;
		font-size: 24upx;
	}
	.search{
		display:flex;
		flex-direction:row;
		align-items:center;
		position: relative;
		background-color: #F5F5F5;
		border-radius: 40upx;
		height: 50upx;
		width:68%;
	}
	.search image{
		width:28upx;
		height:28upx;
		margin-left:32upx;
		margin-right: 18upx;
	}
	.search input{
		width:80%;
		font-size: 24upx;
	}
	.ssHistory{
		margin:60upx 32upx 0upx 32upx;
	}
	.ssTuijian{
		margin:30upx 32upx 0upx 32upx;
	}
	.ssHot{
		margin:30upx 32upx 0upx 32upx;
	}
	.ssTit{
		margin-bottom:38upx;
		font-size: 30upx;
		color: #333333;
	}
	.historyTit{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.historyTit > view:last-child{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		color: #999999;
		font-size:26upx;
	} 
	.historyTit image{
		width:28upx;
		height: 27upx;
		margin-right:10upx;
	}
	.lsList{
		display: flex;
		flex-direction:row;
		flex-wrap: wrap;
		max-height: 172upx;
		overflow: hidden;
	}
	.lsList > view{
		margin-right: 27upx;
		margin-bottom:30upx;
	}
	.lsList text{
		height: 56upx;
		display: inline-block;
		line-height: 56upx;
		color: #999999;
		font-size: 24upx;
		text-align: center;
		border-radius: 56upx;
		padding:0 27upx;
		border:1upx solid #DCDCDC;
		background-color: #FFFFFF;
	}
	.nolsList{
		font-size: 24upx;
		text-align: center;
		color: #999999;
		margin-bottom: 30upx;
	}
	.tjActive text{
		background-color: #ADD9FF;
		color: #FFFFFF;
		border:1upx solid #ADD9FF;
	}
	.hotList > view{
		display: flex;
		flex-direction: row;
		align-items: center;
		line-height: 55upx;
	}
	.hotList text{
		color: #999999;
		font-size:24upx;
		margin-right: 16upx;
	}
	.hotList image{
		width:22upx;
		height:27upx;
	}
</style>
